<template>
	<layout>
		<warm></warm>
		<view class="main-content">
			<!-- 查询区域 -->
			<view class="search-section">
				<view class="search-header">
					<view class="title-area">
						<text class="title">发票查询</text>
					</view>
					<text class="subtitle">温馨提示：请至少填写一项查询信息</text>
				</view>

				<view class="search-form">
					<view class="form-group">
						<view class="form-item">
							<text class="label">创建时间</text>
							<view class="input-wrapper">
								<uni-icons type="navigate-filled" size="18" color="#666"></uni-icons>
								<uni-datetime-picker v-model="queryParams.range" type="daterange" @change="handleRangeChange" />
							</view>
						</view>
					</view>
					<view class="form-group">
						<!-- <view class="form-item" style="flex: 1">
							<text class="label">选择园区</text>
							<view class="input-wrapper">
								<uni-icons type="location-filled" size="18" color="#666"></uni-icons>
								<uni-data-picker :border="false" v-model="parkArea" :localdata="parkOptions" placeholder="请选择纪念园区" popup-title="选择园区" @change="handleAreaChange" />
							</view>
						</view> -->
						<view class="form-item" style="flex: 1">
							<text class="label">逝者信息</text>
							<view class="input-wrapper">
								<uni-icons type="person-filled" size="18" color="#666"></uni-icons>
								<uni-easyinput :inputBorder="false" v-model="queryParams.szxm" placeholder="请输入逝者姓名" />
							</view>
						</view>
					</view>

					<view class="form-group">
						<view class="form-item">
							<text class="label">办理人信息</text>
							<view class="input-row">
								<view class="input-wrapper flex-1">
									<uni-icons type="contact-filled" size="18" color="#666"></uni-icons>
									<uni-easyinput :inputBorder="false" v-model="queryParams.blrxm" placeholder="请输入办理人姓名" />
								</view>
								<view class="input-wrapper flex-1">
									<uni-icons type="phone-filled" size="18" color="#666"></uni-icons>
									<uni-easyinput :inputBorder="false" v-model="queryParams.blrdh" placeholder="请输入办理人电话" />
								</view>
							</view>
						</view>
					</view>

					<view class="search-actions">
						<button class="reset-btn" @click="handleReset">
							<uni-icons type="refresh" size="18" color="#666"></uni-icons>
							<text>重置查询</text>
						</button>
						<button class="search-btn" type="primary" @click="handleSearch">
							<uni-icons type="search" size="18" color="#fff"></uni-icons>
							<text>开始查询</text>
						</button>
					</view>

					<!-- <view class="quick-tips">
						<view class="tip-item">
							<uni-icons type="info-filled" size="14" color="#808080"></uni-icons>
							<text>温馨提示：请至少填写一项查询信息</text>
						</view>
						<view class="tip-item">
							<uni-icons type="help" size="14" color="#999"></uni-icons>
							<text>未找到对应园区可点击立即刷新按钮</text>
							<view class="refresh-link" @click="handleRefreshParkData">
								<uni-icons type="refresh" size="14" color="#4a90e2"></uni-icons>
								<text>立即刷新</text>
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<!-- 查询结果 -->
			<view class="result-section">
				<view class="result-header">
					<view class="header-left">
						<uni-icons type="list" size="20" color="#666"></uni-icons>
						<text class="result-title">查询结果</text>
						<text class="result-count">(共找到 {{ searchResultsCount }} 条记录)</text>
					</view>
					<view class="header-right">
						<text class="update-time">更新时间：{{ refreshTime }}</text>
					</view>
				</view>
				<view class="result-grid-container">
					<!-- 结果为空显示 -->
					<view class="empty-result" v-if="searchResultsEmpty">
						<image src="/static/images/empty.png" mode="aspectFit" class="empty-icon" />
						<text class="empty-text">暂无查询到可开票订单</text>
						<text class="empty-desc">请调整查询条件后重试</text>
					</view>

					<!-- 结果列表 -->
					<view class="result-grid">
						<view class="result-card" v-for="(item, index) in searchResults" :key="index">
							<view class="card-decoration">
								<view class="corner-pattern"></view>
								<view class="side-line"></view>
							</view>

							<view class="card-header">
								<view class="location-wrapper">
									<uni-icons type="location" size="16" color="#606c88"></uni-icons>
									<text class="location">{{ item.mw }}</text>
								</view>
								<view :class="['status-tag', 'normal']">
									<uni-icons color="#606c88" type="checkmark" size="12"></uni-icons>
									<text>{{ item.kpzt }}</text>
								</view>
							</view>

							<view class="card-body">
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="person-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">安葬人员：</text>
										<view class="deceased-names">
											<text> {{ item.szxm }}</text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="auth-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">家属姓名：</text>
										<view class="deceased-names">
											<text> {{ item.xm }} </text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="phone-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">联系电话：</text>
										<view class="deceased-names">
											<text> {{ setPhone(item.lxdh) }} </text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="wallet-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">收款金额：</text>
										<view class="deceased-names">
											<text class="price"> {{ item.skje }}¥</text>
										</view>
									</view>
								</view>
								<view class="info-row deceased-list">
									<view class="info-icon">
										<uni-icons type="notification-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<text class="label">创建时间：</text>
										<view class="deceased-names">
											<text> {{ item.createdTime }} </text>
										</view>
									</view>
								</view>
								<!-- <view class="info-row expiry-info">
									<view class="info-icon">
										<uni-icons type="calendar-filled" size="16" color="#606c88"></uni-icons>
									</view>
									<view class="info-content">
										<view class="label">管理费到期：</view>
										<view v-if="item.yxrq" :class="['date', item.isExpired ? 'expired-text' : '']">
											{{ item.yxrq }}
										</view>
										<view v-else class="no-expired-text">
											<text>未设置管理费到期时间</text>
										</view>
									</view>
								</view> -->
							</view>
							<view class="card-footer" v-if="item.kpztKey == 'option3' || item.kpztKey == 'option4'">
								<button class="action-btn detail-btn" @click="handleViewDetail(item)">
									<uni-icons type="info" size="18" color="#fff"></uni-icons>
									<text>查看发票</text>
								</button>
							</view>
						</view>
					</view>
				</view>
				<view class="pagination-container">
					<uni-pagination :total="searchResultsCount" :page-size="queryParams.pageSize" :current="queryParams.pageNum" @change="handlePaginationChange"></uni-pagination>
				</view>
			</view>
		</view>
	</layout>
	<!-- 打印发票弹窗 -->
	<InvoicePreview ref="invoicePreviewRef" @printSuccess="handlePrintSuccess" :invoiceUrl="invoiceResultUrl" />
	<back></back>
	<IdleLogout />
</template>

<script setup>
	import { ref } from 'vue';

	// 园区选项数据
	const parkArea = ref('');

	// 园区选项数据
	const parkOptions = ref([]);

	// 查询数据参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 6,
		gsKey: useCompanyStore().GetCurCompanyInfo().bsKey,
		blrxm: '',
		ddlxKey: '',
		range: [],
	});

	// 搜索结果
	const searchResults = ref([]);

	// 搜索结果总数
	const searchResultsCount = ref(0);

	// 搜索结果为空
	const searchResultsEmpty = ref(true);

	// 刷新时间
	const refreshTime = ref('00:00:00');

	// 业务id
	const serviceId = ref('');

	// 发票预览弹窗
	const invoicePreviewRef = ref(null);

	// 发票预览结果
	const invoiceResultUrl = ref('');

	/**
	 * 设置文本掩码
	 * @param {String} phone 手机号
	 * @returns {String} 掩码后的手机号
	 */
	const setPhone = (phone) => {
		return phone ? UTILSetTextMask(phone, '###****####') : '-';
	};

	const handleRangeChange = (e) => {
		console.log('🚀 ~ handleRangeChange ~ e:', e);
		if (e.length > 0) {
			queryParams.value.startDate = e[0];
			queryParams.value.endDate = e[1];
		}
	};

	/**
	 * 处理查看详情操作
	 * @param {Object} item 墓位信息
	 */
	const handleViewDetail = async (item) => {
		try {
			uni.showLoading({ title: '发票获取中...', mask: true });
			const { code, data } = await ApiGetInvoiceResultNotice({ id: item[serviceId.value] });
			if (code === 200) {
				console.log('🚀 ~ handleViewDetail ~ data:', data);
				if (!data) return uni.showToast({ title: '暂无发票地址可预览', icon: 'none' });
				// 设置发票地址
				invoiceResultUrl.value = data.split(':')[1];
				// 打开发票预览弹窗
				invoicePreviewRef.value.open();
			}
		} catch (error) {
			console.log('handleViewDetail', error);
		} finally {
			uni.hideLoading();
		}
	};

	// 打印成功
	const handlePrintSuccess = () => {
		console.log('🚀 ~ handlePrintSuccess ~ printInvoicePopup.value:', '打印成功');
		invoicePreviewRef.value.close();
		uni.showToast({ title: '打印成功', icon: 'success' });
		// init();
		// getList();
	};

	/**
	 * 分页改变
	 * @param {*} item
	 */
	const handlePaginationChange = (item) => {
		console.log('🚀 ~ handlePaginationChange ~ item:', item);
		queryParams.value.pageNum = item.current;
		searchResultsEmpty.value = true;
		searchResults.value = [];
		getList();
	};

	// 查询方法
	const handleSearch = async () => {
		// 检查是否有查询条件
		const hasPersonInfo = queryParams.value.szxm || queryParams.value.blrxm || queryParams.value.blrdh;

		if (!hasPersonInfo) {
			// 如果没有填写任何人员信息
			if (queryParams.value.range.length > 0) {
				uni.showToast({ title: '选择时间范围时，请至少填写一项人员信息', icon: 'none' });
			} else {
				uni.showToast({ title: '请至少填写一项查询信息', icon: 'none' });
			}
			return;
		}
		init();
		getList();
	};

	// 重置查询
	const handleReset = () => {
		parkArea.value = '';
		queryParams.value.szxm = '';
		queryParams.value.blrxm = '';
		queryParams.value.blrdh = '';
		queryParams.value.range = [];
		queryParams.value.startDate = '';
		queryParams.value.endDate = '';
		init();
		// getList();
	};

	// 刷新数据
	// const handleRefreshParkData = () => {
	// 	getParkData();
	// };

	/**
	 * 区域选择器
	 * @param {Object} e 事件对象
	 */
	// const handleAreaChange = (e) => {
	// 	console.log(e);
	// 	queryParams.value.mwy = '';
	// 	queryParams.value.mwq = '';
	// 	queryParams.value.mwp = '';
	// 	if (e.detail.value && e.detail.value.length) {
	// 		queryParams.value.mwy = e.detail.value[0].text;
	// 		queryParams.value.mwq = e.detail.value[1].text;
	// 		queryParams.value.mwp = e.detail.value[2].text;
	// 	}
	// };

	// 获取墓地列表
	const getList = async () => {
		try {
			uni.showLoading({ title: '订单获取中...', mask: true });
			refreshTime.value = UTILFormatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
			const { code, rows, total } = await ApiGetManageFeePrintOrder(queryParams.value);
			if (code === 200) {
				searchResults.value = [...searchResults.value, ...rows];
				searchResultsCount.value = total;
				searchResultsEmpty.value = searchResults.value.length === 0;
				console.log('🚀 ~ getList ~ searchResults.value:', searchResults.value);
			}
		} catch (error) {
			console.log('getList', error);
		} finally {
			uni.hideLoading();
		}
	};

	// 初始化
	const init = () => {
		searchResults.value = [];
		searchResultsCount.value = 0;
		searchResultsEmpty.value = true;
		queryParams.value.pageNum = 1;
	};

	// 获取园区数据
	// const getParkData = async () => {
	// 	try {
	// 		// 获取存储数据
	// 		uni.showLoading({ title: '园区获取中...', mask: true });
	// 		const { code, rows } = await ApiGetCemeteryAddress({
	// 			ssgs: useCompanyStore().GetCurCompanyInfo().bm,
	// 		});
	// 		if (code === 200) {
	// 			// 设置树形结构
	// 			parkOptions.value = UTILCemeteryArrayToTree(rows);
	// 			// 缓存数据
	// 			useCompanyStore().setParkData({
	// 				data: parkOptions.value,
	// 				refreshTime: new Date().getTime(),
	// 			});
	// 		}
	// 	} catch (error) {
	// 		console.log('ApiGetCemeteryAddress', error);
	// 	} finally {
	// 		uni.hideLoading();
	// 		// init();
	// 		// getList();
	// 	}
	// };

	onLoad((options) => {
		// 获取类型
		queryParams.value.ddlxKey = options.type;

		// 设置业务id
		serviceId.value = options.id;

		// // 获取缓存数据
		// const parkData = useCompanyStore().GetParkData();
		// // 如果缓存数据存在，则判断是否需要重新获取数据
		// if (parkData) {
		// 	// 计算时间差
		// 	const calcTime = new Date().getTime() - parkData.refreshTime;
		// 	// 设置缓存时间为2小时 (2 * 60 * 60 * 1000 = 7200000)
		// 	const cacheTime = 4 * 60 * 60 * 1000;
		// 	if (calcTime > cacheTime) {
		// 		getParkData();
		// 	} else {
		// 		parkOptions.value = parkData.data;
		// 		// init();
		// 		// getList();
		// 	}
		// } else getParkData();
	});

	// 组件卸载时停止倒计时
	// onUnmounted(() => {
	// 	stop();
	// });
</script>
<style lang="scss" scoped>
	.main-content {
		display: flex;
		gap: 15px;
		height: calc(100vh - 130px);
		:deep(.uni-icons) {
			font-size: 14px !important;
		}
	}

	:deep(.uniui-calendar) {
		display: none;
	}

	:deep(.uni-date-x) {
		background-color: transparent !important;
	}

	:deep(.uni-date-editor .uni-date-x--border) {
		border: none !important;
	}

	.search-section {
		flex: 1;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);

		:deep(.uni-easyinput__content) {
			background-color: transparent !important;
		}

		.search-header {
			background: linear-gradient(135deg, #3f4c6b, #606c88);
			padding: 20px;
			border-radius: 12px 12px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 10px;

			.title-area {
				display: flex;
				align-items: center;

				.title-icon {
					width: 24px;
					height: 24px;
					margin-right: 10px;
				}

				.title {
					font-size: 20px;
					color: #fff;
					font-weight: 600;
				}
			}

			.subtitle {
				color: rgba(255, 255, 255, 0.85);
				font-size: 12px;
				opacity: 0.6;
			}
		}

		.search-form {
			padding: 20px;

			.form-group {
				margin-bottom: 15px;

				.label {
					font-size: 15px;
					color: #333;
					margin-bottom: 10px;
					display: block;
					font-weight: 500;
				}
			}

			.input-wrapper {
				background: #f5f7fa;
				border-radius: 8px;
				padding: 0 15px;
				height: 45px;
				display: flex;
				align-items: center;
				border: 1px solid #e8e8e8;

				&:focus-within {
					border-color: #606c88;
				}
			}

			.input-row {
				display: flex;
				gap: 15px;
			}

			.flex-1 {
				flex: 1;
			}

			.search-actions {
				display: flex;
				gap: 15px;
				margin-top: 30px;

				.reset-btn,
				.search-btn {
					flex: 1;
					height: 45px;
					border-radius: 8px;
					font-size: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;

					&:active {
						opacity: 0.9;
					}
				}

				.reset-btn {
					background: #f5f7fa;
					border: 1px solid #e8e8e8;
					color: #666;

					&:hover {
						background: #eef0f5;
					}
				}

				.search-btn {
					background: linear-gradient(135deg, #3f4c6b, #606c88);
					border: none;
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #4a5980, #6b7ba0);
					}
				}
			}

			.quick-tips {
				margin-top: 15px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				gap: 15px;

				.tip-item {
					display: flex;
					align-items: center;
					gap: 5px;
					color: #999;
					font-size: 13px;
					position: relative;
					z-index: 1;
				}

				.refresh-link {
					display: flex;
					align-items: center;
					gap: 4px;
					margin-left: 8px;
					color: #4a90e2;
					cursor: pointer;

					&:active {
						opacity: 0.8;
					}
				}
			}
		}
	}

	.result-section {
		flex: 1.2;
		padding: 15px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		width: 100%;
		height: 100%;

		.pagination-container {
			display: flex;
			justify-content: center;
			margin-top: 10px;
		}

		.result-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			padding-bottom: 15px;
			border-bottom: 1px solid #eee;

			.header-left {
				display: flex;
				align-items: center;
				gap: 8px;

				.result-title {
					font-size: 18px;
					font-weight: 600;
					color: #333;
				}

				.result-count {
					font-size: 14px;
					color: #666;
				}
			}

			.update-time {
				font-size: 13px;
				color: #999;
			}
		}

		.empty-result {
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 220px;
				height: 220px;
			}

			.empty-text {
				font-size: 16px;
				color: #333;
				margin-bottom: 8px;
			}

			.empty-desc {
				font-size: 14px;
				color: #999;
			}
		}

		.result-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
			padding: 10px;
		}

		.result-grid-container {
			width: 100%;
			height: calc(100% - 90px);
			overflow-y: scroll;
		}

		.result-card {
			background: #fff;
			border-radius: 12px;
			padding: 20px;
			border: 1px solid #eee;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 24px rgba(96, 108, 136, 0.12);

				.card-decoration {
					.corner-pattern {
						opacity: 1;
					}

					.side-line {
						height: 80%;
					}
				}
			}

			.card-decoration {
				.corner-pattern {
					position: absolute;
					top: 0;
					right: 0;
					width: 60px;
					height: 60px;
					background: linear-gradient(135deg, transparent 48%, rgba(96, 108, 136, 0.1) 50%);
					opacity: 0.6;
					transition: all 0.3s ease;
				}

				.side-line {
					position: absolute;
					left: 0;
					top: 10%;
					width: 3px;
					height: 60%;
					background: linear-gradient(to bottom, #3f4c6b, #606c88);
					border-radius: 3px;
					transition: all 0.3s ease;
				}
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px dashed #eee;

				.location-wrapper {
					display: flex;
					align-items: center;
					gap: 6px;

					.location {
						font-size: 16px;
						font-weight: 500;
						color: #333;
					}
				}

				.status-tag {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 4px 10px;
					border-radius: 0 0 0 20px;
					font-size: 12px;
					position: absolute;
					right: 0;
					top: 0;

					&.normal {
						background: rgba(24, 144, 255, 0.1);
						color: #1890ff;
					}

					&.expired {
						background: rgba(255, 77, 79, 0.1);
						color: #ff4d4f;
					}
				}
			}

			.card-body {
				.info-row {
					display: flex;
					align-items: flex-start;
					margin-bottom: 12px;

					.info-icon {
						margin-right: 8px;
						// padding-top: 2px;
					}

					.info-content {
						flex: 1;
						display: flex;
						align-items: baseline;

						.no-expired-text {
							color: #e1cc13;
							font-size: 14px;
							margin-left: 4px;
						}

						.label {
							color: #666666;
							font-size: 14px;
						}

						.deceased-names {
							color: #333;
							font-size: 14px;
							margin-left: 4px;
							flex: 1;

							.price {
								color: #ff4d4f;
							}
						}

						.date {
							margin-left: 8px;
							&.expired-text {
								color: #ff4d4f;
							}
						}
					}
				}
			}

			.card-footer {
				margin-top: 20px;

				.action-btn {
					width: 100%;
					height: 36px;
					border-radius: 18px;
					font-size: 14px;
					border: none;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;

					&.normal-btn {
						background: linear-gradient(135deg, #3f4c6b, #606c88);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #4a5980, #6b7ba0);
						}
					}

					&.expired-btn {
						background: linear-gradient(135deg, #ff4d4f, #ff7875);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #ff6b6b, #ff8f8f);
						}
					}

					&.detail-btn {
						background: linear-gradient(135deg, #36d1dc, #5b86e5);
						color: #fff;

						&:hover {
							background: linear-gradient(135deg, #3ddbe6, #6590e9);
						}
					}

					&:active {
						transform: scale(0.98);
					}
				}
			}
		}
	}

	.detail-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		:deep(.uni-icons) {
			font-size: 18px !important;
		}

		.empty-fee {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30px 20px;
			text-align: center;

			image {
				width: 120px;
				height: 120px;
				margin-bottom: 15px;
				opacity: 0.8;
			}

			.empty-fee-title {
				font-size: 16px;
				color: #606c88;
				font-weight: 500;
				margin-bottom: 8px;
			}

			.empty-fee-desc {
				font-size: 14px;
				color: #999;
				line-height: 1.5;
			}
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			padding: 10px 20px;
			padding-bottom: 100px;
			box-sizing: border-box;
			height: 82vh;
			overflow-y: auto;

			.main-info {
				padding: 15px;
				background: #f8f9fc;
				border-radius: 12px;
				margin-bottom: 15px;

				.info-header {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.location-tag {
						display: flex;
						align-items: center;
						gap: 8px;
						font-size: 16px;
						font-weight: 500;
						color: #606c88;
					}

					.status-badge {
						display: flex;
						align-items: center;
						gap: 4px;
						padding: 6px 12px;
						border-radius: 20px;
						font-size: 13px;

						&.active {
							background: rgba(103, 194, 58, 0.1);
							color: #67c23a;
						}

						&.expired {
							background: rgba(245, 108, 108, 0.1);
							color: #f56c6c;
						}
					}
				}
			}

			.detail-section {
				margin-bottom: 15px;
				background: #fff;
				border-radius: 12px;
				padding: 20px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

				.section-header {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 15px;
					font-size: 15px;
					font-weight: 500;
					color: #333;
				}

				.deceased-list {
					display: flex;
					flex-wrap: wrap;
					gap: 10px;

					.deceased-item {
						padding: 6px 12px;
						background: #f8f9fc;
						border-radius: 6px;
						color: #606c88;
					}
				}

				.contact-info {
					background: #f8f9fc;
					border-radius: 8px;
					padding: 15px;

					.info-item {
						display: flex;
						align-items: center;
						padding: 8px 0;

						&:not(:last-child) {
							border-bottom: 1px dashed rgba(96, 108, 136, 0.1);
						}

						.label {
							width: 80px;
							color: #666;
							font-size: 14px;
						}

						.value-wrapper {
							flex: 1;
							display: flex;
							align-items: center;
							gap: 8px;

							.value {
								color: #333;
								font-size: 15px;
								margin-left: 4px;

								&:empty::before {
									content: '暂无信息';
									color: #999;
									font-style: italic;
								}
							}

							.call-btn {
								background: linear-gradient(135deg, #4caf50, #45a049);
								border: none;
								border-radius: 15px;
								padding: 4px 12px;
								display: flex;
								align-items: center;
								gap: 4px;
								margin-left: auto;

								text {
									color: #fff;
									font-size: 12px;
								}

								&:active {
									transform: scale(0.98);
								}

								&:hover {
									background: linear-gradient(135deg, #45a049, #409444);
								}
							}
						}
					}
				}

				.fee-info {
					background: #f8f9fc;
					border-radius: 8px;
					padding: 15px;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.fee-item {
						display: flex;
						align-items: center;
						padding: 10px 0;

						.label {
							width: 80px;
							color: #666;
							font-size: 14px;
						}

						.fee-value {
							display: flex;
							align-items: baseline;

							.currency {
								color: #ff6b6b;
								font-size: 16px;
								margin-right: 2px;
							}

							.amount {
								color: #ff6b6b;
								font-size: 24px;
								font-weight: 600;
								font-family: DIN Alternate, Arial;
							}

							.unit {
								color: #999;
								font-size: 14px;
							}
						}

						.date-value {
							display: flex;
							align-items: center;
							gap: 8px;

							.value {
								font-size: 15px;
								color: #333;
								font-weight: 500;

								&.expired-text {
									color: #ff4d4f;
								}
							}

							.expired-tag {
								display: flex;
								align-items: center;
								gap: 4px;
								background: rgba(255, 77, 79, 0.1);
								padding: 2px 8px;
								border-radius: 4px;
								font-size: 12px;
								color: #ff4d4f;
							}
						}
					}

					.divider {
						height: 1px;
						background: linear-gradient(to right, rgba(96, 108, 136, 0.08), rgba(96, 108, 136, 0.15), rgba(96, 108, 136, 0.08));
						margin: 4px 0;
					}
				}
			}

			.service-section {
				.service-card {
					display: flex;
					align-items: center;
					padding: 20px;
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					border-radius: 12px;
					cursor: pointer;

					.service-icon {
						width: 48px;
						height: 48px;
						border-radius: 24px;
						background: rgba(255, 255, 255, 0.2);
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 15px;
					}

					.service-info {
						flex: 1;

						.title {
							font-size: 16px;
							color: #fff;
							margin-bottom: 4px;
						}

						.desc {
							font-size: 13px;
							color: rgba(255, 255, 255, 0.8);
						}
					}
				}
			}
		}
		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			.close-btn,
			.renew-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30px;
				height: 38px;
				font-size: 14px;
				border: none;
				width: 220px;
				border-radius: 38px;
				transition: all 0.3s ease;
				gap: 6px;

				&:hover {
					transform: translateY(-1px);
				}

				&:active {
					transform: translateY(0);
				}
			}

			.close-btn {
				color: #fff;
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
				}
			}

			.renew-btn {
				color: #fff;
				background: linear-gradient(135deg, #ff4d4f, #ff7875);
				box-shadow: 0 2px 6px rgba(255, 77, 79, 0.2);

				&:hover {
					box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
				}
			}
		}
	}

	.renewal-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			padding: 10px 20px;
			height: 82vh;
			padding-bottom: 100px;
			box-sizing: border-box;
			overflow-y: auto;

			.section-header {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 15px;
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}

			.fee-detail-section {
				margin-bottom: 15px;

				.fee-title {
					display: flex;
					flex-direction: column;
					gap: 8px;
					background: rgba(96, 108, 136, 0.08);
					padding: 12px 16px;
					border-radius: 8px;
					margin-bottom: 15px;
					border-left: 4px solid #606c88;

					.fee-icon {
						display: flex;
						gap: 8px;
					}

					text {
						font-size: 15px;
						color: #333;
						font-weight: 500;
					}

					.fee-subtitle {
						text {
							font-size: 13px;
							color: #666;
							font-weight: normal;
						}
					}
				}

				.fee-card {
					background: linear-gradient(to bottom, #ffffff, #f8f9fc);
					border-radius: 16px;
					padding: 0px 24px;
					box-shadow: 0 4px 20px rgba(96, 108, 136, 0.08);
					border: 1px solid rgba(96, 108, 136, 0.1);

					.fee-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10px 0;

						&:not(:last-child) {
							border-bottom: 1px dashed rgba(96, 108, 136, 0.12);
						}

						.label {
							color: #666;
							font-size: 15px;
							font-weight: 500;
						}

						.value-wrapper {
							display: flex;
							align-items: center;
							gap: 8px;
							background: rgba(96, 108, 136, 0.05);
							padding: 8px 16px;
							border-radius: 20px;

							.value {
								color: #333;
								font-size: 15px;
								font-weight: 500;
							}
						}

						.fee-amount {
							display: flex;
							align-items: center;
							gap: 8px;

							.amount-tag {
								background: rgba(255, 107, 107, 0.1);
								padding: 8px 16px;
								border-radius: 20px;
								display: flex;
								align-items: baseline;

								.currency {
									color: #ff6b6b;
									font-size: 16px;
									margin-right: 2px;
								}

								.number {
									font-size: 22px;
									font-weight: 600;
									color: #ff6b6b;
									font-family: DIN Alternate, Arial;
								}
							}

							.unit {
								color: #999;
								font-size: 14px;
							}
						}

						.year-selector {
							display: flex;
							gap: 12px;

							.year-btn {
								min-width: 80px;
								padding: 8px 16px;
								border-radius: 20px;
								border: 1px solid #e8e8e8;
								background: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								transition: all 0.3s ease;

								.year-text {
									font-size: 16px;
									font-weight: 500;
									color: #666;
								}

								.year-unit {
									font-size: 12px;
									color: #999;
									margin-top: 2px;
								}

								&.active {
									background: linear-gradient(135deg, #4a90e2, #357abd);
									border: none;
									transform: translateY(-1px);
									box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);

									.year-text,
									.year-unit {
										color: #fff;
									}
								}

								&:hover:not(.active) {
									border-color: #4a90e2;
									transform: translateY(-1px);
								}
							}
						}
					}

					&.total {
						margin-top: 10px;
						padding-top: 20px;
						border-top: 2px solid rgba(96, 108, 136, 0.1);

						.total-amount {
							display: flex;
							align-items: center;
							gap: 12px;

							.amount-wrapper {
								background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
								padding: 10px 20px;
								border-radius: 24px;
								display: flex;
								align-items: baseline;
								box-shadow: 0 4px 12px rgba(255, 107, 107, 0.2);

								.currency {
									color: #fff;
									font-size: 18px;
									margin-right: 2px;
								}

								.number {
									font-size: 28px;
									font-weight: 600;
									color: #fff;
									font-family: DIN Alternate, Arial;
								}
							}

							.total-tag {
								background: rgba(255, 107, 107, 0.1);
								color: #ff6b6b;
								padding: 4px 12px;
								border-radius: 12px;
								font-size: 12px;
								font-weight: 500;
							}
						}
					}
				}
			}

			.handler-section {
				.form-group {
					background: #f8f9fc;
					border-radius: 12px;
					padding: 20px;
					display: flex;
					justify-content: space-between;

					.input-item {
						&:last-child {
							margin-bottom: 0;
						}

						.label {
							display: block;
							color: #666;
							font-size: 14px;
							margin-bottom: 8px;
						}

						.input-wrapper {
							display: flex;
							align-items: center;
							background: #fff;
							border: 1px solid #e8e8e8;
							border-radius: 8px;
							padding: 0 15px;
							height: 45px;

							&:focus-within {
								border-color: #4a90e2;
							}

							.input {
								flex: 1;
								margin-left: 10px;
								font-size: 15px;
							}
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			button {
				width: 220px;
				height: 38px;
				border-radius: 38px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				font-size: 15px;

				&.cancel-btn {
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #6b7ba0, #4a5980);
					}
				}

				&.confirm-btn {
					background: linear-gradient(135deg, #ff6b6b, #ff4d4f);
					color: #fff;

					&:hover {
						background: linear-gradient(135deg, #ff8f8f, #ff6b6b);
					}
				}

				&:active {
					transform: scale(0.98);
				}
			}
		}
	}

	.qrcode-popup {
		width: 560px;
		background: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);

		.payment-error-tip {
			margin-top: 15px;
			display: flex;
			gap: 6px;
			padding: 8px 16px;
			background: #fff2f0;
			border-radius: 12px;
			border: 1px dashed rgba(255, 77, 79, 0.2);

			.payment-error-tip-text {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				gap: 6px;
			}

			text {
				color: #ff4d4f;
				font-size: 12px;
			}
		}

		.popup-header {
			background: #606c88;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			overflow: hidden;
			z-index: 10;
			box-sizing: border-box;

			&::after {
				content: '';
				position: absolute;
				right: 0;
				top: 0;
				width: 140px;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1));
			}

			.title {
				font-size: 16px;
				color: #fff;
				font-weight: 500;
				letter-spacing: 1px;
			}
		}

		.popup-content {
			padding: 10px 20px;
			background: linear-gradient(to bottom, #f8f9fc, #fff);
			padding-bottom: 100px;
			box-sizing: border-box;
			height: 82vh;
			overflow-y: auto;

			.payment-info {
				display: flex;
				gap: 15px;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					left: 50%;
					top: 10%;
					height: 80%;
					width: 1px;
					background: linear-gradient(to bottom, transparent, rgba(96, 108, 136, 0.12), transparent);
				}

				.left-section {
					flex: 1;

					.amount-display {
						background: #606c88;
						padding: 10px 20px;
						border-radius: 12px;
						position: relative;
						overflow: hidden;
						box-shadow: 0 4px 15px rgba(96, 108, 136, 0.15);

						&::before {
							content: '';
							position: absolute;
							right: -20px;
							top: -20px;
							width: 100px;
							height: 100px;
							background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
							border-radius: 50%;
						}

						.label {
							display: flex;
							align-items: center;
							gap: 8px;
							color: rgba(255, 255, 255, 0.9);
							font-size: 15px;
							margin-bottom: 10px;
							position: relative;
						}

						.amount {
							background: rgba(255, 255, 255, 0.1);
							padding: 10px;
							border-radius: 8px;
							text-align: center;
							backdrop-filter: blur(4px);
							border: 1px solid rgba(255, 255, 255, 0.2);

							.currency {
								color: #fff;
								font-size: 20px;
								margin-right: 4px;
								opacity: 0.9;
							}

							.number {
								color: #fff;
								font-size: 38px;
								font-weight: 500;
								font-family: DIN Alternate, Arial;
								text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
							}
						}
					}

					.countdown-section {
						text-align: center;
						margin: 20px 0;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;

						.countdown-ring {
							width: 100px;
							height: 100px;
							border: 3px solid #eef0f5;
							border-radius: 50%;
							display: inline-flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							position: relative;
							margin-bottom: 12px;
							box-shadow: inset 0 2px 8px rgba(96, 108, 136, 0.08);

							&::before {
								content: '';
								position: absolute;
								top: -3px;
								left: -3px;
								right: -3px;
								bottom: -3px;
								border-radius: 50%;
								border: 3px solid #606c88;
								border-top-color: transparent;
								animation: rotate 1s linear infinite;
							}

							&.warning {
								&::before {
									border-color: #ff4d4f;
									border-top-color: transparent;
								}
							}

							.time {
								font-size: 32px;
								color: #606c88;
								font-weight: 500;
								font-family: DIN Alternate, Arial;

								&.warning-text {
									color: #ff4d4f;
								}
							}

							.unit {
								font-size: 14px;
								color: #999;
								margin-top: 2px;

								&.warning-text {
									color: #ff4d4f;
								}
							}
						}

						.countdown-text {
							color: #666;
							font-size: 14px;
							position: relative;
							display: inline-block;
							padding: 6px 16px;
							background: #f8f9fc;
							border-radius: 12px;
							box-shadow: 0 2px 6px rgba(96, 108, 136, 0.08);

							&.warning-text {
								color: #ff4d4f;
								background: #fff2f0;
							}
						}
					}

					.payment-tips {
						background: #fff2f0;
						border-radius: 12px;
						padding: 10px 20px;
						position: relative;
						border: 1px solid rgba(255, 77, 79, 0.15);
						box-shadow: 0 2px 8px rgba(255, 77, 79, 0.05);

						.tip-header {
							display: flex;
							align-items: center;
							gap: 8px;
							color: #ff4d4f;
							font-size: 12px;
							font-weight: 500;
							margin-bottom: 15px;
							padding-bottom: 12px;
							border-bottom: 1px dashed rgba(255, 77, 79, 0.2);

							.uni-icons {
								background: rgba(255, 77, 79, 0.1);
								width: 24px;
								height: 24px;
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.tip-list {
							.tip-item {
								position: relative;
								padding-left: 15px;
								margin-bottom: 10px;
								color: #ff4d4f;
								font-size: 12px;
								display: flex;
								align-items: center;

								&::before {
									content: '■';
									position: absolute;
									left: 0;
									font-size: 8px;
									opacity: 0.8;
								}

								&:last-child {
									margin-bottom: 0;
								}
							}
						}
					}
				}

				.right-section {
					flex: 1;
					display: flex;
					flex-direction: column;
					// align-items: center;
					// justify-content: center;

					.qrcode-container {
						background: #fff;
						padding: 25px;
						border-radius: 12px;
						border: 1px solid #eef0f5;
						text-align: center;
						position: relative;
						box-shadow: 0 4px 20px rgba(96, 108, 136, 0.08);

						&::before {
							content: '';
							position: absolute;
							left: 10px;
							right: 10px;
							top: 10px;
							bottom: 10px;
							border: 1px dashed rgba(96, 108, 136, 0.15);
							border-radius: 8px;
							pointer-events: none;
						}

						.qrcode {
							width: 200px;
							height: 200px;
							margin-bottom: 20px;
							padding: 10px;
							background: #fff;
							border-radius: 8px;
							box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
						}
					}

					.scan-tips {
						background: linear-gradient(135deg, #4caf50, #45a049);
						padding: 16px 30px;
						border-radius: 16px;
						display: flex;
						align-items: center;
						gap: 10px;
						box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
						position: relative;
						overflow: hidden;
						transition: all 0.3s ease;

						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: -100%;
							width: 100%;
							height: 100%;
							background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
							animation: shine 2s infinite;
						}

						.scan-icon-wrapper {
							background: rgba(255, 255, 255, 0.2);
							padding: 10px;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.scan-text-wrapper {
							display: flex;
							flex-direction: column;
							gap: 4px;

							.primary-text {
								color: #fff;
								font-size: 12px;
								font-weight: 500;
							}

							.secondary-text {
								color: rgba(255, 255, 255, 0.9);
								font-size: 12px;
							}
						}

						&:hover {
							transform: translateY(-2px);
							box-shadow: 0 12px 24px rgba(76, 175, 80, 0.25);
						}
					}
				}
			}
		}

		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			display: flex;
			gap: 15px;
			justify-content: center;

			.cancel-btn {
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				color: #fff;
				border: none;
				height: 38px;
				width: 220px;
				border-radius: 38px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				box-shadow: 0 2px 8px rgba(96, 108, 136, 0.15);
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(96, 108, 136, 0.25);
				}

				&:active {
					transform: translateY(0);
				}
			}
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}

	@keyframes shine {
		to {
			left: 100%;
		}
	}

	.countdown-section {
		.countdown-ring {
			&.warning {
				&::before {
					border-color: #ff4d4f;
					border-top-color: transparent;
				}
			}

			.time {
				&.warning-text {
					color: #ff4d4f;
				}
			}
		}

		.countdown-text {
			&.warning-text {
				color: #ff4d4f;
				background: #fff2f0;
			}
		}
	}

	:deep(.uni-dialog-content) {
		padding: 10px 0;
	}

	.dialog-content {
		padding: 20px;
		width: 100%;

		.dialog-icon {
			text-align: center;
			margin-bottom: 20px;

			.uni-icons {
				background: rgba(96, 108, 136, 0.1);
				padding: 15px;
				border-radius: 50%;
			}
		}

		.dialog-info {
			background: #f8f9fc;
			border-radius: 12px;
			padding: 8px 30px;
			margin-bottom: 15px;

			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 0;

				&:not(:last-child) {
					border-bottom: 1px dashed rgba(96, 108, 136, 0.1);
				}

				.label {
					color: #666;
					font-size: 14px;
				}

				.value {
					color: #333;
					font-size: 15px;
					font-weight: 500;
				}

				.amount {
					display: flex;
					align-items: baseline;

					.currency {
						color: #ff6b6b;
						font-size: 14px;
						margin-right: 2px;
					}

					.number {
						color: #ff6b6b;
						font-size: 20px;
						font-weight: 600;
						font-family: DIN Alternate, Arial;
					}
				}
			}
		}

		.dialog-tips {
			display: flex;
			align-items: center;
			gap: 6px;
			justify-content: center;
			color: #999;
			font-size: 13px;
		}
	}

	:deep(.uni-popup-dialog) {
		border-radius: 16px;
		overflow: hidden;
		width: 380px;

		.uni-dialog-button {
			height: 60px;
		}

		.uni-dialog-title {
			padding: 20px;
			background: linear-gradient(135deg, #606c88, #3f4c6b);
			color: #fff;
		}

		.uni-dialog-button-group {
			border-top: 1px solid #eee;

			button {
				font-size: 15px;
				height: 48px;
				line-height: 48px;

				&.uni-button-color {
					color: #606c88;

					&:active {
						opacity: 0.8;
					}
				}

				&.uni-button-color-primary {
					background: linear-gradient(135deg, #606c88, #3f4c6b);
					color: #fff;

					&:active {
						opacity: 0.9;
					}
				}
			}
		}
	}

	.print-invoice-popup {
		background-color: #fff;
		border-radius: 12rpx;
		width: 600rpx;
		padding: 30rpx;

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 40rpx;

			text {
				font-size: 28rpx;
				color: #333;
			}
		}

		.popup-buttons {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			button {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
			}

			.btn-cancel {
				background-color: #f5f5f5;
				color: #666;
			}

			.btn-confirm {
				background-color: #007aff;
				color: #fff;
			}
		}
	}
</style>
